<!doctype html>
<html lang="en">
  <head>
    <title>CartoonReader</title>
    <link rel="stylesheet" href="../css/cartoon-view.css" type="text/css" />
  </head>
  <body>
    <div id="content">
      <header>
        <div id="headerContainer"><h1 id="cartoonReader"><img src="../images/cartoon_reader_text.png" alt="Cartoon reader!" /></h1></div>
        <nav>
          <ul id="topNavigation" class="navigation">
            <li id="exitLi"><button id="exitButton" name="close"><img src="../images/icon_exit.png" alt="Exit" /></button></li>
            <li id="manageLi"><button id="manageButton" name="manage"><img src="../images/icon_manage.png" alt="Manage cartoons" /></button></li>
          </ul>
        </nav>
      </header>
      <iframe id="cartoonContainerFrame">
      </iframe>
    </div>
    <footer>
      <nav>
        <li id="previousLi"><button id="previousButton" name="previous"><img class="left-arrow" src="../images/icon_prev.png" alt="Previous" /></button></li>
        <li id="nextLi"><button id="nextButton" name="next"><img class="right-arrow" src="../images/icon_next.png" alt="Next" /></button></li>
        <li id="infoLi"><button id="infoToggleButton" name="info"><img class="right-arrow" src="../images/icon_info.png" alt="Info" /></button></li>
      </nav>
    </footer>
    <div id="splashContent">
      <div id="splash">
      <img alt="It's the... CARTOON READER!" id="splashTitle" src="../images/splash-title.png">
      <img alt="PAFF! EE-YOW! CLINK!!" id="splashAnimation" src="../images/splash-loading.gif">
      <img alt="Loading..." id="splashLoading" src="../images/splash-loading.png">
      </div>
    </div>
    <script type="text/javascript" src="../js/single-cartoon-first.js" ></script>
  </body>
</html>
